<template>
<div class="login">

  <ChangeLogin></ChangeLogin>
  <div class="mainLogin" v-if="showLogin">
      <div class="titleLogin">Login</div>
    <el-form class="form" label-width="80px" :model="LoginData">
      <el-form-item label="账号" >
        <el-input style="width: 80%" class="inputLogin" v-model="LoginData.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input style="width: 80%" class="inputLogin" v-model="LoginData.password" type="password"></el-input>
      </el-form-item>
    </el-form>
    <div class="toR" @click="exchange"></div>
    <div class="toLogin" @click="toHome" @keyup.enter="toHome"></div>
    <div></div>
  </div>

  <div class="mainSign" v-if="!showLogin" >
      <div class="titleLogin">sign in</div>
    <el-form class="form2" label-width="80px" :model="SignData">
      <el-form-item label="账号" >
        <el-input style="width: 80%" class="inputLogin" v-model="SignData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input style="width: 80%" class="inputLogin" v-model="SignData.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input style="width: 80%" class="inputLogin" v-model="SignData.nickname"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input style="width: 50%" v-model="SignData.phone"></el-input>
        <el-button @click="getCode"  class="getCode">获取验证码</el-button>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input style="width: 80%" v-model="SignData.code"></el-input>
      </el-form-item>
    </el-form>
    <div class="totrun" @click="exchange"></div>
    <div class="toLogin"  @click="toSign" @keyup.enter="toSign"></div>
  </div>

</div>
</template>

<script>
import router from "../router";
import ChangeLogin from "./ChangeLogin";

export default {
  name: "Login",
  components: {ChangeLogin},
  data(){
    return{
      //切换登录注册界面
      showLogin:true,
      LoginData:{
        userName:'',
        password:'',
      },
      SignData:{
        username:'',
        password:'',
        nickname:'',
        phone:'',
        code:''
      },
    }
  },
  methods:{
    //切换界面
    exchange(){
      this.showLogin=!this.showLogin
    },
    //登录
    toHome(){
      this.axios.post('/user/login',this.LoginData).then(res=>{
        //登录成功的时候，保存username到浏览器
        console.log(res)
        if(res.data.code==200){
          localStorage.setItem('token',res.data.data.token)
          localStorage.setItem('userName',this.LoginData.userName)
          localStorage.setItem('password',this.LoginData.password)
          // console.log(res)
          this.$message.success('登录成功')
          this.$router.push('/Home')
        }
        else this.$message.warning('登录密码错误')
      }).catch(()=>{
        this.$message.warning('登录密码错误')
      })
    },
    //注册
    toSign(){
      console.log("开始注册")
      // console.log(this.SignData)
      this.axios.post('/Logon',{},{params:this.SignData}).then(res=>{
        console.log(res)
        console.log(this.SignData)
        if(res.data.code=='400'){
          this.$message.error('验证码错误')
        }
        else if(res.data==''){
          this.$message.error('注册失败')
        }
        else if(res.data.code=='200'){
          this.$message.success('注册成功')
          this.LoginData.userName=this.SignData.username
          this.LoginData.password=this.SignData.password
          this.toHome()
        }
      }).catch(()=>{
        this.$message.warning('注册失败，该账号已被注册')
      })
    },
    //获取验证码
    getCode(){
      console.log('获取验证码')
      this.axios.post('/send/code',{},{
        params: {
          phone:this.SignData.phone}
      }).then(res=>{
        console.log("验证码相应",res)
        if(res.data.code=='200'){
          this.$message.success('获取验证码成功')
        }
        else{
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  mounted(){
    if(localStorage.token!==undefined){
      this.LoginData.userName=localStorage.getItem('userName')
      this.LoginData.password=localStorage.getItem('password')
      this.toHome()
    }
  },
  /*beforeRouteEnter(to,from,next){*/
  //   if(localStorage.token===undefined){
  //     next()
  //   }
  //   else{
  //     this.LoginData.userName=localStorage.getItem('userName')
  //     this.LoginData.password=localStorage.getItem('password')
  //     // this.toHome()
  //     next('/Home')
  //   }
  // }
}
</script>

<style scoped>
@font-face {
  font-family: 'f1';
  src: url("../assets/字体1.ttf");
}
.login{
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(../assets/loginbg.png);
  background-size:cover
}
/*.login::after{*/
/*  position: absolute;*/
/*  content: '';*/
/*  height: 100%;*/
/*  width: 100%;*/
/*  z-index:-1;*/
/*  background-color: rgba(109, 114, 95, 0.2);*/
/*}*/
.mainLogin{
  position: absolute;
  width: 400px;
  height: 300px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.4) ;
  left:50%;
  margin-left: -200px;
  top:17%;
}
.titleLogin{
  font-family: f1;
  font-size: 60px;
  text-align: center;
}
.form{
  position: absolute;
  top: 40%;
  width: 100%;
}
.inputLogin{
  /*修改输入框光标颜色*/
  caret-color: black;
}
/*.inputLogin /deep/ .el-input__inner{*/
/*  color: #76777c !important;*/
/*}*/
.toLogin{
  position: absolute;
  bottom: 6%;
  right: 10%;
  width: 50px;
  height: 42px;
  background-image: url("../assets/下一步.png") ;
  background-size: 100%;
}
.toLogin:hover{
  background-image: url("../assets/下一步 (1).png");
  cursor: pointer;
}
.toR{
  position: absolute;
  bottom: 6%;
  left: 10%;
  width: 60px;
  height: 30px;
  background-image: url("../assets/注册.png") ;
  background-size: 100%;
}
.toR:hover{
  background-image: url("../assets/注册 (1).png");
  cursor: pointer;
}

.mainSign{
  position: absolute;
  width: 400px;
  height: 460px;
  box-shadow: 0 25px 35px rgba(0,0,0,0.4) ;
  left:50%;
  margin-left: -200px;
  top:6%;
}
.getCode{
  margin-left: 20px;
  background-color: rgba(190, 140, 140, 0);
  color: #fff;
  border: 1px rgba(37, 33, 33, 0.62) solid;
}
.totrun{
  position: absolute;
  bottom: 8%;
  left: 10%;
  width: 50px;
  height: 40px;
  background-image: url("../assets/返回.png") ;
  background-size: 100%;
}
.totrun:hover{
  background-image: url("../assets/返回 (1).png");
  cursor: pointer;
}
.form2{
  position: absolute;
  top: 20%;
  width: 100%;
}
</style>